import './TempCustomizeA01.scss'

import { useEffect, useState } from 'react'
import { LayoutDeftula } from '../Config/LayoutDeftula'

import { ColorCallBack, getNestedValue, assemblyDataA01 } from '../Utils'

// 交投AI预警定制模板
const TempCustomizeA01 = ({ config, apiData }) => {
    const [Data, setData] = useState({ A01: 0, A02: 0, A03: 0, A04: 0 })
    const configuration = config || LayoutDeftula.CustomizeA01
    const { list_apiName, list_dataLevel, image_left, image_right, content, width, height, contentColor, contentDeg, numberArr,
        fill, fontSize, fontFamily, fontWeight, fontStyle, shadowX, shadowY, shadowB, shadowC, contentPadding,
    } = configuration
    const backStyle = {
        height,
        width: `${width}%`,
        background: ColorCallBack(contentColor, contentDeg),
        padding: contentPadding.split(',').map(num => num + 'px').join(' ')
    }

    const textStyle = {
        color: fill,
        fontSize,
        fontFamily,
        fontWeight,
        fontStyle,
        filter: `drop-shadow(${shadowX}px ${shadowY}px ${shadowB}px ${shadowC})`
    }

    const parseStringWithPlaceholders = (str, data) => {
        const parts = []
        let currentIndex = 0
        data.forEach((item) => {
            const { dataField, number_fill, number_fontSize, number_fontFamily, number_fontWeight, number_fontStyle,
                number_shadowX, number_shadowY, number_shadowB, number_shadowC } = item
            const style = {
                color: number_fill,
                fontSize: number_fontSize,
                fontFamily: number_fontFamily,
                fontWeight: number_fontWeight,
                fontStyle: number_fontStyle,
                textShadow: `${number_shadowX}px ${number_shadowY}px ${number_shadowB}px ${number_shadowC}`
            }
            const placeholder = `{${dataField}}`
            const index = str.indexOf(placeholder, currentIndex)
            if (index !== -1) {
                if (index > currentIndex) parts.push(str.slice(currentIndex, index))
                const element = (<span key={index} style={style}>{Data?.[item.dataField] || 0}</span>)
                parts.push(element)
                currentIndex = index + placeholder.length
            }
        })

        if (currentIndex < str.length) parts.push(str.slice(currentIndex))
        return parts
    }

    useEffect(() => {
        if (apiData?.length !== 0 && list_apiName) {
            const [urlList] = apiData.filter(v => v.name === list_apiName)
            const data = getNestedValue(list_dataLevel, urlList)
            setData(data)
        }
    }, [config, apiData])

    return (
        <div className='TempCustomizeA01'>
            <img src={image_left} alt="" />
            <div style={backStyle}>
                <div style={textStyle}>
                    {parseStringWithPlaceholders(content, numberArr)}
                </div>
            </div>
            <img src={image_right} alt="" />
        </div>
    );
};

export default TempCustomizeA01;